/*
 * @Author: 李一番 
 * @Date: 2021-12-31 09:47:22 
 * @Last Modified by: 李一番
 * @Last Modified time: 2022-01-04 16:32:49
 */

import { ref, shallowRef } from "vue";

export default function () {
  const chart = shallowRef<any>()
  const sidebarElm = ref<Element>()

  const chartResizeHandler = () => {
    if (chart.value) {
      chart.value.resize()
    }
  }
  
  const sidebarResizeHandler = (e: TransitionEvent) => {
    if (e.propertyName === 'width') {
      chartResizeHandler
    }
  }

  const initResizeEvent = () => {
    window.addEventListener('resize', chartResizeHandler)
  }

  const destoryResizeEvent = () => {
    window.removeEventListener('resize', chartResizeHandler)
  }

  const initSidebarResizeEvent = () => {
    sidebarElm.value = document.getElementsByClassName('sidebar-container')[0]
    if (sidebarElm.value) {
      sidebarElm.value.addEventListener('transitionend', sidebarResizeHandler as EventListener)
    }
  }

  const destroySidebarResizeEvent = () => {
    if (sidebarElm.value) {
      sidebarElm.value.removeEventListener('transitionend', sidebarResizeHandler as EventListener)
    }
  }

  const mounted = () => {
    initResizeEvent()
    initSidebarResizeEvent()
  }

  const beforeDestory = () => {
    destoryResizeEvent()
    destroySidebarResizeEvent()
  }

  return {
    chart,
    mounted,
    beforeDestory
  }
}
